<template>
  <div class="Detail">
    <header-t></header-t>
    <div class="contain">
      <div class="left-img">
        <div class="big-img">
          <img :src="BigImg"/>
        </div>
        <div class="small-img">
          <div v-for="(item,Index) in ImgSrc" :key="Index" @mouseenter="ChangeImg(Index)">
            <img :src="item">
          </div>
        </div>
      </div>
      <div class="right-text">
        <div class="title">
          {{ goods.tittle }}
        </div>
        <div class="price">
          <label>价格</label>
          <span> 抢购价￥{{ goods.price }} </span>
        </div>
        <div class="process">
          <label>促销</label>
          <span class="a">限时特价</span>
          <span>限时直降100元</span><br />
          <label> </label>
          <span class="a">以旧换新</span>
          <span>以旧换新最高补贴1000元</span><br />
        </div>
        <div class="button">
          <input type="button" value="加入购物车" />
          <input type="button" value="立即购买" />
        </div>
      </div>
    </div>
    <footer-t></footer-t>
  </div>
</template>

<script>
import FooterT from "./FooterT.vue";
import HeaderT from "./HeaderT.vue";
export default {
  data() {
    return {
      BigImg:require("/src/assets/1.png"),
      goods: {
        tittle:
          "【新品】HUAWEI MatePad 10.4英寸 2022款 WiFi 6GB+128GB 曜石灰 HarmonyOS 2 全新教育中心 护眼全面屏 手机PC多屏协同 4大振幅扬声器+哈曼卡顿调音 学习办公平板电脑",
        price: "1799.00",
      },
      ImgSrc: [
        require("/src/assets/1.png"),
        require("/src/assets/2.png"),
        require("/src/assets/3.png"),
        require("/src/assets/4.png"),
        require("/src/assets/5.png"),
        require("/src/assets/6.png"),
      ],
    };
  },
  components: { FooterT, HeaderT },
  methods:{
    ChangeImg(index){
      this.BigImg= this.ImgSrc[index];
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.Detail {
  background-color: rgb(252, 252, 252);
}
.contain {
  margin: 0 auto;
  width: 80%;
  height: 600px;
  position: relative;
  padding: 20px;
}
.left-img {
  width: 600px;
  height: 600px;
}
.big-img {
  width: 560px;
  height: 360px;
  padding: 20px;
}
.big-img img{
  width: 600px;
  height: 400px;
}
.small-img {
  width: 600px;
  padding-left: 30px;
}
.small-img div{
  width: 88px;
  height: 90px;
  float: left;
  margin-top: 50px;
  padding: 10px 5px 0 5px;
  text-align: center;
}
.small-img div:hover{
  border: 1px solid red;
}
.small-img div img{
  width: 80px;
  height: 80px;
}
.right-text {
  width: 870px;
  height: 580px;
  padding: 10px;
  position: absolute;
  left: 640px;
  top: 20px;
}
.title {
  width: 870px;
  height: 120px;
  line-height: 40px;
  font-size: 25px;
  text-align: left;
  margin-bottom: 20px;
}
.price,
.process {
  width: 870px;
  height: 40px;
  padding-left: 10px;
  padding-top: 20px;
  text-align: left;
  background-color: rgb(243, 243, 243);
}
.price label,
.process label {
  display: inline-block;
  width: 80px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 20px;
  text-align: left;
}
.price span {
  width: 300px;
  height: 20px;
  display: inline-block;
  font-size: 25px;
  text-align: left;
  color: rgb(174, 21, 21);
}
.process {
  height: 100px;
  line-height: 40px;
}
.process .a {
  display: inline-block;
  width: 80px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  color: rgb(206, 0, 0);
  border: 1px solid rgb(206, 0, 0);
  margin-right: 10px;
}
.button {
  height: 60px;
  margin-top: 20px;
  text-align: left;
}
.button input {
  display: inline-block;
  width: 200px;
  height: 60px;
  background-color: rgb(235, 0, 0);
  color: aliceblue;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border: none;
  margin-left: 20px;
}
</style>